<script setup>
import { onMounted, reactive, ref } from 'vue';
import { PicState, PicCateAllList, formatTimestamp, HdisShow, formatTimeAll } from '@/hooks/Picker'
import { getSerActivityData, getSerActivityDel } from '@/api/SerActivity'
import { ElMessageBox, ElMessage } from "element-plus";
import ServiceActivity from './ServiceActivity.vue';
import * as XLSX from 'xlsx'

const stateList = PicState()
const cateList = PicCateAllList()
const count = ref(0)
const list = ref([])
const ServiceA = ref()
const queryData = reactive({
  current: 1,
  pageSize: 3,
  title: '',
  community_code: '',
  status: null,
  create_time: ''
})
const createtime = ref()
const initData = async () => {
  let { data } = await getSerActivityData(queryData)
  count.value = data.count
  list.value = data.rows
}
onMounted(() => {
  initData()
})
const sizeChange = (val) => {
  queryData.pageSize = val;
  initData();
};
// 页码切换
const currentChange = (val) => {
  queryData.current = val;
  initData();
};
const ResEt = () => {
  createtime.value = ''
  Object.assign(queryData, {
    current: 1,
    pageSize: 3,
    title: '',
    community_code: '',
    status: null,
    create_time: []
  })
  initData()
}
const onSearCh = () => {
  queryData.create_time = createtime.value
  if (Array.isArray(queryData.create_time)) {
    queryData.create_time = queryData.create_time.join(',')
  }
  queryData.current = 1
  initData()
}
// const isShow=ref(false)
const delRow = (id) => {
  ElMessageBox.confirm(
    '确定删除吗',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功!',
      })
      getSerActivityDel(id)
      setTimeout(() => {
        if (queryData.current > 1 && list.value.length === 1) queryData.current--
        initData()
      }, 1000)
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
}
const Edit = (id) => {
  ServiceA.value.replyData(id)
}

// 导出功能XXY留
const exportToExcel = () => {
  const key = Object.keys(list.value[0])
  const header = tableColumns.map(item => item.label)// 表头信息
  const data = [header, ...list.value.map(item => [item.id, item.community.name, item.title, item.place, item.photo, item.sponsor_unit, item.status === 1 ? '有效' : '无效', formatTimeAll(item.begin_time), formatTimeAll(item.end_time), formatTimeAll(item.create_time), '操作'])]
  const ws = XLSX.utils.aoa_to_sheet(data)
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
  XLSX.writeFile(wb, 'tableData.xlsx')
}
const tableColumns = [
  { label: 'ID', prop: 'id' },
  { label: '小区名称', prop: 'community.name', name: 'community.name' },
  { label: '活动主题', prop: 'title' },
  { label: '活动地点', prop: 'place' },
  { label: '图片', prop: 'photo', name: 'photo' },
  { label: '举办地位', prop: 'sponsor_unit' },
  { label: '状态', prop: '', name: 'status' },
  { label: '活动开始时间', prop: 'begin_time', name: 'begin_time' },
  { label: '活动截止时间', prop: 'end_time', name: 'end_time' },
  { label: '创建时间', prop: 'create_time', name: 'create_time' },
  { label: '操作', prop: '', name: 'caozuo' },
]
</script>
<template>  
  <div class="app-container">
    <p style="font-size: 14px;"><b style="font-size: 20px;">活动管理</b> 用于管理小区不定期举办的各种活动</p>
    <el-card>
      <el-form :model="queryData" :inline="true" class="demo-form-inline" label-position="top">
        <el-col :span="4">
          <el-form-item label="小区名称">
            <el-select placeholder="请输入" v-model="queryData.community_code" clearable>
              <el-option v-for="item in cateList" :key="item.id" :label="item.name" :value="item.code"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="活动主体">
            <el-input placeholder="请输入" clearable v-model="queryData.title"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="状态">
            <el-select placeholder="请输入" v-model="queryData.status" clearable>
              <el-option v-for="(item, index) in stateList" :key="index" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="创建时间">
            <el-date-picker v-model="createtime" type="daterange" range-separator="至" start-placeholder="请选择"
              end-placeholder="请选择" value-format="x" format="YYYY/MM/DD">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :offset="3" :span="4">
          <el-form-item style="width: 400px; margin-top: 32px;">
            <!-- <template> -->
            <el-button type="primary" >导入</el-button>
            <el-button type="primary" @click="exportToExcel">导出</el-button>
            <el-button @click="ResEt">重置</el-button>
            <el-button type="primary" @click="onSearCh">搜索</el-button>
            <!-- </template> -->
          </el-form-item>
        </el-col>
      </el-form>
    </el-card>
    <br>
    <el-card style="position: relative;">
      <el-button type="primary" style="position: absolute;right: 20px;" @click="HdisShow = true">新增活动</el-button>
      <el-table :data="list" style="margin-top: 40px;">
        <el-table-column width="40px" prop="id" label="ID">
        </el-table-column>
        <el-table-column prop="community.name" label="小区名称">
        </el-table-column>
        <el-table-column prop="title" label="活动主题">
        </el-table-column>
        <el-table-column width="80px" prop="place" label="活动地点">
        </el-table-column>
        <el-table-column prop="photo" label="照片">
          <template #default="{ row }">
            <div class="demo-image__preview">
              <el-image style="width: 100px; height: 100px" :src="`http://124.223.14.236:8881${row.photo}`"
                :zoom-rate="1.2" :preview-src-list="[`http://124.223.14.236:8881${row.photo}`]" :initial-index="99"
                :z-index="99" fit="cover" :preview-teleported="true" />
            </div>
          </template>
        </el-table-column>
        <el-table-column width="80px" prop="sponsor_unit" label="举办单位">
        </el-table-column>
        <el-table-column width="60px" prop="status" label="状态">
          <template #default="{ row }">
            {{ row.status == 0 ? '无效' : '有效' }}
          </template>
        </el-table-column>
        <el-table-column prop="begin_time" label="活动开始时间">
          <template #default="{ row }">
            {{ formatTimestamp(row.begin_time) }}
          </template>
        </el-table-column>
        <el-table-column prop="end_time" label="活动截止时间">
          <template #default="{ row }">
            {{ formatTimestamp(row.end_time) }}
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间">
          <template #default="{ row }">
            {{ formatTimestamp(row.create_time) }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="text" @click="Edit(row.id)">编辑</el-button>
            <el-button type="text" text @click="delRow(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table><br>
      <!-- 分页区域 -->
      <el-pagination @size-change="sizeChange" @current-change="currentChange" v-model:current-page="queryData.current"
        v-model:page-size="queryData.pageSize" layout="total, prev, pager, next" :total="count" background>
      </el-pagination>
    </el-card>
    <ServiceActivity ref="ServiceA" @updateList="initData"></ServiceActivity>
    
  </div>
  <el-from label-width="80px" style="text-align: center;">
    <div>Ant Design divro黑马前端合肥前端欢迎您</div>
    <div>© 2023 悦兴物业集团</div>
    <br>
  </el-from>
</template>
<style  scoped>
.demo-image__error .image-slot {
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
</style>